<template>
    <div class="inbound-list-page" v-if="$route.name === 'InboundList'">
        <!-- 页面标题 -->
        <div class="page-header">
            <span class="header-title">入库记录管理</span>
            <!-- v-permission="['VACCINE_ADMIN'] -->
            <!-- 搜索筛选 -->
            <div>
                <el-form :model="searchForm" inline class="right-form">
                    <el-form-item>
                        <el-input v-model="searchForm.vaccineName" @clear="handleInputClear"
                            placeholder="支持输入厂家模糊搜索、操作员精准搜索" clearable style="width: 300px" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleSearch"><el-icon style="margin-right: 5px;">
                                <Search />
                            </el-icon>搜索</el-button>
                        <el-button @click="handleReset"><el-icon style="margin-right: 5px;">
                                <Refresh />
                            </el-icon>重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <!-- 数据表格 -->
        <div class="table-container">
            <el-table :data="tableData" v-loading="loading" border size="default" stripe style="width: 100%">
                <el-table-column prop="inboundNumber" label="入库单号" width="180" align="center" />
                <el-table-column prop="vaccineName" label="疫苗名称" min-width="200" />
                <el-table-column prop="batchNumber" label="批次号" width="150" align="center" />
                <el-table-column prop="manufacturer" label="生产厂家" min-width="180" />
                <el-table-column prop="specification" label="规格" width="100" align="center" />
                <el-table-column prop="quantity" label="数量" width="100" align="center">
                    <template #default="scope">
                        <span class="quantity">{{ scope.row.quantity }} 支</span>
                    </template>
                </el-table-column>
                <el-table-column prop="supplier" label="供应商" min-width="200" />
                <el-table-column prop="productionDate" label="生产日期" width="160" align="center">
                    <template #default="scope">
                        {{ scope.row.productionDate }}
                    </template>
                </el-table-column>
                <el-table-column prop="expiryDate" label="有效期至" width="160" align="center">
                    <template #default="scope">
                        {{ scope.row.expiryDate }}
                    </template>
                </el-table-column>
                <el-table-column prop="inboundTime" label="入库时间" width="160" align="center">
                    <template #default="scope">
                        {{ scope.row.inboundTime }}
                    </template>
                </el-table-column>
                <el-table-column prop="operator" label="操作员" width="120" align="center" />
                <el-table-column prop="remark" label="备注" min-width="150" />
                <el-table-column label="操作" width="140" align="center" fixed="right">
                    <template #default="scope">
                        <div class="action-buttons">
                            <el-button size="small" @click="handleView(scope.row.id)" class="view-btn">
                                查看
                            </el-button>
                            <span class="divider">|</span>
                            <el-button size="small" type="danger" @click="handleDelete(scope.row)" class="delete-btn">
                                删除
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 分页 -->
        <div class="pagination-container">
            <el-pagination v-model:current-page="pagination.current" v-model:page-size="pagination.size"
                :total="pagination.total" :hide-on-single-page="true" layout="prev, pager, next"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>
    <router-view></router-view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
import { useRouter } from 'vue-router'
import axios from 'axios'
const router = useRouter()
// 搜索表单
const searchForm = reactive({
    vaccineName: '',
    dateRange: []
})

// 表格数据
const tableData = ref([])
const loading = ref(false)

// 分页配置
const pagination = reactive({
    current: 1,
    size: 10,
    total: 0
})
// 加载数据
const loadData = async () => {
    loading.value = true
    try {
        const params = {
            page: pagination.current,
            size: pagination.size,
        }

        await axios.get("http://127.0.0.1:8081/vaccine/inbound/list", {
            headers: {
                'X-Admin-Token': sessionStorage.getItem("token")
            },
            params: params
        }).then((req) => {

            tableData.value = req.data.data
            pagination.total = req.data.total

        })
    } catch (error) {
        ElMessage.error('获取入库记录失败')
        console.error('加载入库记录错误:', error)
    } finally {
        loading.value = false
    }
}

// 搜索
const handleSearch = async () => {
    loading.value = true
    try {
        const params = {
            page: pagination.current,
            size: pagination.size,
            keyword: searchForm.vaccineName
        }
        await axios.get("http://127.0.0.1:8081/vaccine/inbound/list", {
            headers: {
                'X-Admin-Token': sessionStorage.getItem("token")
            },
            params: params
        }).then((req) => {
            if (req.data.success === true) {
                ElNotification({
                    message: req.data.message,
                    type: "success",
                    position: 'bottom-right',
                })
                tableData.value = req.data.data
                pagination.total = req.data.total
            } else {
                ElNotification({
                    title: 'Error',
                    message: req.data.message,
                    type: "error",
                    position: 'bottom-right',
                })
            }

        })
    } catch (error) {
        ElMessage.error('获取入库记录失败,加载全部数据')
        loadData()
    } finally {

        loading.value = false

    }


}
// 输入框清除内容时触发
const handleInputClear = () => {
    loadData() // 清除内容时加载全部数据
}
// 重置搜索
const handleReset = () => {
    Object.assign(searchForm, {
        vaccineName: '',
        dateRange: []
    })
    pagination.current = 1
    loadData()
}

// 查看详情
const handleView = (row) => {
    console.log(row);
    router.push({
        name: 'InboundDetail',
        query: { id: row }
    })
}

// 删除记录
const handleDelete = async (row) => {
    try {
        await ElMessageBox.confirm(
            `确定要删除入库记录 "${row.batchNumber}" 吗？`,
            '删除确认',
            {
                type: 'warning',
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }
        )

        // 使用模拟API - 实际开发中替换为真实的API调用
        await mockApi.deleteInbound(row.inboundId)
        ElMessage.success('删除成功')
        loadData() // 重新加载数据
    } catch (error) {
        if (error !== 'cancel') {
            ElMessage.error('删除失败')
        }
    }
}

// 分页事件
const handleSizeChange = (size) => {
    pagination.size = size
    pagination.current = 1
    loadData()
}

const handleCurrentChange = (current) => {
    pagination.current = current
    loadData()
}

// 初始化加载
onMounted(() => {
    loadData()
})
</script>

<style scoped>
.inbound-list-page {
    padding: 20px;
    background: #fff;
    border-radius: 8px;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}



.action-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.divider {
    color: #dcdfe6;
    font-size: 12px;
    padding: 0 2px;
}

/* 调整按钮样式 */
.action-buttons .el-button {
    padding: 5px 8px;
    font-size: 12px;
}

.right-form {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

:deep(.right-form .el-form-item) {
    margin-bottom: 0;
    margin-right: 0;
}

:deep(.right-form .el-form-item:not(:last-child)) {
    margin-right: 16px;
}

.page-header h2 {
    margin: 0;
    color: #303133;
}

.table-container {
    margin-bottom: 20px;
}

.quantity {
    color: #409eff;
    font-weight: bold;
}

.pagination-container {
    display: flex;
    justify-content: center;
}

:deep(.el-table .cell) {
    padding: 8px 12px;
}

.header-title {
    font-size: 18px;
    font-weight: 600;
    color: #303133;
    white-space: nowrap;
}
</style>